import { useSelector, useDispatch } from 'react-redux'
import { getTagArticlesAction } from '@/store/actions/articlesAction.js'
import { syncTagAction } from '@/store/actions/tagAction.js'

export default function Tags({ setTab }) {
    const dispatch = useDispatch()
    const { tags } = useSelector((state) => state.tag)

    const handleClickTag = (tag) => {
        setTab(2)
        // tag 同步到reducer
        dispatch(syncTagAction(tag))
        // 获取标签的文章数据
        dispatch(getTagArticlesAction(tag, 1))
    }
    return (
        <div className="sidbar">
            <p>热门标签</p>
            <div className="tag-list">
                {
                    tags.map(tag => {
                        return (
                            <span className='tag-default tag-pill' key={tag}
                                  onClick={() => { handleClickTag(tag) }}
                            >
                                {tag}
                            </span>
                        )
                    })
                }

            </div>
        </div>
    )
}

